<template>
    <div class="login-main">
        <div class="login-content">
            <div class="login-form">
                <div class="music-logo">
                    <img src="../../assets/img/logo.png" alt="">
                </div>
                <div class="form-info">
                    <input type="text" class="form-input" v-model="username" name="username" placeholder="手机号/邮箱" >
                    <input type="password" class="form-input" v-model="password" name="password" placeholder="输入密码" >
                </div>
                <div class="el-button" @click="loginClick">登录</div>
            </div>
            <div class="login-other">
                <ul class="other-icon">
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    name:'login',
    data() {
        return {
            username:'',
            password:''
        }
    },
    created() {
        let param = {
            phone:'15063051635',
            password:'me1436421893'
        }
        this.Public.phoneLogin(param).then(res=>{
            if(res.code == 200){
                sessionStorage.setItem('userInfo',JSON.stringify(res))
            }
        })
    },
    methods:{
        loginClick() {
            if(!this.username){
                Toast('请输入用户名');
                return
            }
            if(!this.password){
                Toast('请输入密码');
                return
            }
            let param = {
                phone:this.username,
                password:this.password
            }
            this.Public.phoneLogin(param).then(res=>{
                if(res.code == 200){
                    Toast.success('登录成功');
                    sessionStorage.setItem('userInfo',JSON.stringify(res))
                    this.$router.push({path:'/',name:'home'})
                }else{
                    Toast.fail(res.msg);
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .login-main{
        height: 100%;
        background: @bg-color1;
        .login-content{
            height: 100%;
            padding:0px 100px;
            display: flex;
            flex-direction: column ;
            justify-content: space-between;
            .login-form{
                margin-top:25%;
                .music-logo{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 200px;
                        height: 200px;
                    }
                }
                .form-info{
                    .form-input{
                        display: block;
                        width: 100%;
                        height: 72px;
                        margin: 30px auto;
                        padding-left: 20px;
                        box-sizing: border-box;
                        border: none;
                        background: none;
                        outline: none;
                        font-size: 32px;
                        color: #f2f2f2;
                        border-bottom: #f2f2f2e5 1px solid;
                    }
                }
                .el-button{
                    margin-top:50px;
                }
            }
            .login-other{
                margin-bottom: 15%;
            }
        }
    }
</style>